<template>
  <el-button type="primary" class="btn" @click="addClue" >录入线索</el-button>
  <el-button type="success" class="btn" @click="importExcel" >导入线索(Excel)</el-button>
  <el-button type="danger" class="btn" @click="batchDelClue" >批量删除</el-button>

  <el-table
      :data="clueList"
      style="width: 100%"
      @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="50"/>
    <el-table-column type="index" label="序号" width="65"/>
    <el-table-column property="ownerDO.name" label="负责人" width="120" />
    <el-table-column property="activityDO.name" label="所属活动"/>
    <el-table-column label="姓名">
      <template #default="scope">
        <a href="javascript:" @click="view(scope.row.id)">{{ scope.row.full_name }}</a>
      </template>
    </el-table-column>
    <el-table-column property="appellationDO.type_value" label="称呼"/>
    <el-table-column property="phone" label="手机" width="120"/>
    <el-table-column property="weixin" label="微信" width="120"/>
    <el-table-column property="needLoanDO.type_value" label="是否贷款"/>
    <el-table-column property="intentionStateDO.type_value" label="意向状态"/>
    <el-table-column property="intentionProductDO.name" label="意向产品"/>
    <el-table-column label="线索状态">
      <template #default="scope">
        <span style="background: lightgoldenrodyellow" v-if="scope.row.state === -1"> {{ scope.row?.stateDO?.type_value }} </span>
        <span v-else> {{ scope.row?.stateDO?.type_value }} </span>
      </template>
    </el-table-column>
    <el-table-column property="sourceDO.type_value" label="线索来源"/>
    <el-table-column property="next_contact_time" label="下次联系时间" width="165"/>
    <el-table-column label="操作" width="230">
      <template #default="scope">
        <el-button type="primary" @click="view(scope.row.id)" >详情</el-button>
        <el-button type="success" @click="edit(scope.row.id)" >编辑</el-button>
        <el-button type="danger" @click="del(scope.row.id)" >删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <p>
    <el-pagination
        background
        layout="prev, pager, next"
        :page-size="pageSize"
        :total="total"
        v-model:current-page="currentPage"
        />
  </p>

  <!--活动备注记录的弹窗-->
  <el-dialog v-model="importExcelDialogVisible" title="导入线索Excel" width="55%" center draggable>
    <el-upload
        ref="uploadRef"
        method="post"
        :http-request="uploadFile"
        :auto-upload="false">

      <template #trigger>
        <el-button type="primary">选择Excel文件</el-button>
      </template>
      仅支持后缀名为.xls或.xlsx的文件

      <template #tip>
        <div class="fileTip">
          重要提示：
          <ul>
            <li>上传仅支持后缀名为.xls或.xlsx的文件；</li>
            <li>给定Excel文件的第一行将视为字段名；</li>
            <li>请确认您的文件大小不超过50MB；</li>
            <li>日期值以文本形式保存，必须符合yyyy-MM-dd格式；</li>
            <li>日期时间以文本形式保存，必须符合yyyy-MM-dd HH:mm:ss的格式；</li>
          </ul>
        </div>
      </template>
    </el-upload>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="importExcelDialogVisible = false">关 闭</el-button>
        <el-button type="primary" @click="submitExcel">导 入</el-button>
      </span>
    </template>

  </el-dialog>

</template>

<script setup>
//每页显示多少条数据
import {inject, onMounted, ref, watch} from "vue";
import {doGet, doPost} from "../http/httpRequest.js";
import router from "../router/router.js";
import {messageTip} from "../util/util.js";

let clueList = ref([{
  ownerDO : {},
  activityDO : {},
  appellationDO : {},
  needLoanDO : {},
  intentionStateDO : {},
  intentionProductDO : {},
  stateDO : {},
  sourceDO : {}
}]);
let importExcelDialogVisible = ref(false);
let uploadRef = ref();

//页数大小
let pageSize = ref();
//数据总数
let total = ref();
//当前是第几页
let currentPage = ref();

onMounted(()=>{
  getData(1);
})
watch(currentPage,(newCurrentPage) => {
  getData(newCurrentPage);
})

const reload = inject("reload");

const getData = (current) => {
  doGet("/api/clues", {
    current : current //当前查询第几页
  }).then(resp => {
    console.log(resp);
    if (resp.data.code === 200) {
      clueList.value = resp.data.data.records;
      pageSize.value = resp.data.data.size;
      total.value = resp.data.data.total;
    }
  })
}

//录入线索
const addClue = () => {router.push("/dashboard/clue/add")}
//导入线索(Excel)
const importExcel = () => {
  importExcelDialogVisible.value = true;
}
//提交
const submitExcel = () => {
  uploadRef.value.submit()
}
const uploadFile = (param) => {
  console.log(param);
  let fileObj = param.file // 相当于input里取得的files
  let formData = new FormData() // new一个FormData对象
  formData.append('file', fileObj)//文件对象，前面file是参数名，后面fileObj是参数值
  doPost("/api/importExcel", formData).then(resp => {
    console.log(resp);
    if (resp.data.code === 200) {
      //Excel导入成功，提示一下
      messageTip("导入成功", "success");
      //清理一下上传的文件
      uploadRef.value.clearFiles();
      //页面刷新
      reload();
    } else {
      //Excel导入失败
      messageTip("导入失败", "error");
    }
  })
}

const handleSelectionChange = () => {}
const batchDelClue = () => {}

const view = (id) => {router.push("/dashboard/clue/detail/" + id)}
const edit = (id) => {router.push("/dashboard/clue/edit/" + id)}
const del = (id) => {}

</script>

<style scoped>

</style>